<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <button @click="count++">{{count}}</button>
        <button @click="age++">{{ age }}</button>
        <button @click="girlFriend.age++">girl age : {{ girlFriend.age }}</button>
        <button @click="girlFriend.foo.bar++">foo.bar : {{ girlFriend.foo.bar }}</button>
    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const { ref, reactive, watch, createApp, toRefs, watchEffect, computed } = Vue;
        createApp({
            setup() {
                const count = ref(0);
                const state = reactive({
                    name: "张三",
                    age: 18,
                    girlFriend: {
                        name: '小红',
                        age: 17,
                        foo: {
                            bar: 1
                        }
                    }
                })
                // watch(数据,回调函数,选项)
                // watch 可以监听的数据类型：ref reactive,函数必须要有返回值，[ref,reactive,函数]
                // watch(count, (newVal, oldVal) => {
                //     console.log("newVal=>", newVal);
                //     console.log("oldVal=>", oldVal);
                // }, {
                //     immediate: true //立即执行一次回调函数
                // })
                // state 值发生变化时，会触发回调函数,这里没有新旧之分
                // watch(state, (newVal) => {
                //     console.log("state newVal=>", newVal);
                // })

                // watch(() => state.age, (newVal, oldVal) => {
                //     console.log(" age newVal=>", newVal);
                //     console.log(" age oldVal=>", oldVal);
                // })

                // watch([count, () => state.age], ([countNewVal, ageNewVal], [countOldVal, ageOldVal]) => {
                //     console.log(" countNewVal=>", countNewVal);
                //     console.log(" ageNewVal=>", ageNewVal);
                //     console.log(" countOldVal=>", countOldVal);
                //     console.log(" ageOldVal=>", ageOldVal);
                // })

                // watch(() => state, (newVal, oldVal) => {
                //     console.log(" age newVal=>", newVal);
                //     console.log(" age oldVal=>", oldVal);
                // }, {
                //     deep: true,//深层监听
                // })


                watchEffect(() => {
                    console.log("count=>", count.value)
                    console.log("state.age=>", state.age)
                    console.log("state.girlFriend.age=>", state.girlFriend.age)
                })


                return {
                    count,
                    ...toRefs(state)
                }
            }
        }).mount('#app')
    </script>
</body>

</html>